function showPie() {
    var pie = echarts.init(document.getElementById('pie'))
    pie.setOption({

        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
            textStyle: {
                fontSize: 18
            }
        },
        legend: {
            top: 10,
            data: [
                '第一产业', '第二产业', '第三产业'
            ],
            textStyle: {
                color: '#97B8C9',
                fontSize: 18
            }
        },
        color: ['#CDDC39', '#2C9CFA', '#FF5722'],
        series: [{
            name: '主体产业占比',
            type: 'pie',
            // minAngle: 6,
            center: [
                '50%', '50%'
            ],
            radius: '50%',
            label: {
                normal: {
                    formatter: '{b}\n {d}%',
                    fontSize: 18,
                    textStyle: {
                        fontSize: 18
                    }
                }
            },
            data: [{
                value: 335,
                name: '第一产业'
            }, {
                value: 310,
                name: '第二产业'
            }, {
                value: 234,
                name: '第三产业'
            }],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    })

}

function showLine() {
    var line = echarts.init(document.getElementById('line'))
    line.setOption({
        color: ['#CDDC39', '#2C9CFA', '#FF5722'],
        legend: {
            top: 10,
            data: [
                '第一产业', '第二产业', '第三产业'
            ],
            textStyle: {
                color: '#97B8C9',
                fontSize: 18
            }
        },
        tooltip: {
            trigger: 'axis',
            textStyle: {
                fontSize: 18
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#97B8C9',
                    fontSize: 18
                }
            },
            boundaryGap: false,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#07274D'
                }
            },
            data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月'
            ]
        },
        yAxis: [

            {
                type: 'value',
                interval: 0,
                splitLine: {
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {
                    onZero: false,

                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#97B8C9',
                        fontSize: 18

                    },
                    formatter: '{value} '
                }
            }
        ],

        series: [{
                name: '第一产业',
                type: 'line',
                data: [
                    100,
                    22,
                    21,
                    5,
                    3,
                    22,
                    2,
                    5,
                    1,
                    22,
                    11,
                    20
                ]

            },
            {
                name: '第二产业',
                type: 'line',
                data: [
                    1,
                    22,
                    2,
                    5,
                    3,
                    2,
                    2,
                    5,
                    1,
                    22
                ]

            },
            {
                name: '第三产业',
                type: 'line',
                data: [
                    1,
                    2,
                    2,
                    5,
                    3,
                    22,
                    2,
                    5,
                    1,
                    2
                ]

            }
        ]
    })
}

function showBar1() {
    var bar = echarts.init(document.getElementById('bar1'))
    bar.setOption({
        color: ['#CDDC39', '#2C9CFA', '#FF5722'],
        legend: {
            top: 10,
            data: [
                '第一产业', '第二产业', '第三产业'
            ],
            textStyle: {
                color: '#97B8C9',
                fontSize: 18
            }
        },
        tooltip: {
            trigger: 'axis',
            textStyle: {
                fontSize: 18
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '3%',
            containLabel: true

        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#97B8C9',
                    fontSize: 18
                },
                rotate: -45
            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#07274D'
                }
            },
            data: [
                '婺城区',
                '金东区',
                '开发区',
                '金华区',
                '武义县',
                '浦江县',
                '磐安县',
                '兰溪市',
                '义乌市',
                '东阳市',
                '永康市'
            ]
        },
        yAxis: [

            {
                type: 'value',
                interval: 0,
                splitLine: {
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {
                    onZero: false,

                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#97B8C9',
                        fontSize: 18

                    },
                    formatter: '{value} '
                }
            }
        ],

        series: [{
                name: '第一产业',
                type: 'bar',
                data: [
                    1,
                    22,
                    2,
                    5,
                    3,
                    22,
                    2,
                    5,
                    1,
                    22,
                    111
                ]

            },
            {
                name: '第二产业',
                type: 'bar',
                data: [
                    1,
                    22,
                    2,
                    5,
                    3,
                    22,
                    2,
                    5,
                    1,
                    22,
                    111
                ]

            },
            {
                name: '第三产业',
                type: 'bar',
                data: [
                    1,
                    22,
                    2,
                    5,
                    3,
                    22,
                    2,
                    5,
                    1,
                    22,
                    111
                ]

            }
        ]
    })
}

function showBar2() {
    var bar = echarts.init(document.getElementById('bar2'))
    bar.setOption({
        tooltip: {
            trigger: 'axis',
            formatter: '{b0}: {c0}',
            textStyle: {
                fontSize: 18
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '2%',
            bottom: '85'
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#97B8C9',
                    fontSize: 18
                }
            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#07274D'
                }
            },
            data: [
                '农、林、牧\n渔业',
                '电力、热力\n燃气',
                '交通、仓储\n邮政',
                '金融业',
                '科学研究\n技术服务',
                '教育',
                '公共管理\n社会保障\n社会组织',
                '采矿业',
                '建筑业',
                '住宿\n餐饮业',
                '房地产业',
                '水利\n环境\n公告设施',
                '卫生\n社会工作',
                '国际组织',
                '制造业',
                '批发\n零售业',
                '信息传输\n软件',
                '租赁\n商务服务业',
                '居民服务\n修理',
                '文化\n体育\n娱乐业'
            ]
        },
        yAxis: [

            {
                type: 'value',
                interval: 0,
                splitLine: {
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {
                    onZero: false,

                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#97B8C9',
                        fontSize: 18

                    },
                    formatter: '{value} '
                }
            }
        ],

        series: [{
            name: '',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: function (value) {
                        var colorList = [
                            '#128420',
                            '#FF5722',
                            '#B8E986',
                            '#FABC41',
                            '#41C1F8',

                            '#0D80FE',
                            '#BD10E0',
                            '#9013FE',
                            '#FFC107',
                            '#E91E63',

                            '#E51C23',
                            '#50E3C2',
                            '#009688',
                            '#F08EDB',
                            '#FFEB3B',

                            '#F47C7C',
                            '#5677FC',
                            '#C7FEBE',
                            '#ACD9FF',
                            '#FCD59B'

                        ]
                        return colorList[value.dataIndex]

                    }
                }
            },
            data: [
                1,
                22,
                2,
                5,
                3,
                22,
                2,
                5,
                1,
                22,
                2,
                5,
                3,
                22,
                2,
                5,
                1,
                22,
                3,
                22
            ]

        }]
    })
}

showPie()
showLine()
showBar1()
showBar2()